﻿<UserControl
    xmlns:my="clr-namespace:MemoBoss"  
    x:Class="MemoBoss.CollectionScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:controlsPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:classes="clr-namespace:Classes"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="728"
   
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
   xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    
    shell:SystemTray.IsVisible="False">

    <!--LayoutRoot contains the root grid where all other page content is placed-->

    <UserControl.Resources>
        <Storyboard x:Name="Hide">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <!--<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot">
                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
                </DoubleAnimationUsingKeyFrames>-->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="LayoutRoot">
                <DiscreteObjectKeyFrame KeyTime="0" >
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="Show" Completed="Show_Completed" >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <!--<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="LayoutRoot">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="LayoutRoot">
                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
                </DoubleAnimationUsingKeyFrames>-->
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="LayoutRoot">
                <DiscreteObjectKeyFrame KeyTime="0" >
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>

        <ControlTemplate x:Name="template" x:Key="panoramaTemplate" TargetType="controls:Panorama" >
            <Grid>

                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <controlsPrimitives:PanningBackgroundLayer x:Name="BackgroundLayer" Grid.RowSpan="2" HorizontalAlignment="Left">
                    <Grid x:Name="background" CacheMode="BitmapCache" Margin = "-224,0">
                        <!--<Image Tag="LayerIndex=-30" x:Name="bgImage" Margin="-50" Stretch="UniformToFill" Opacity="0.5" >

                        </Image>-->
                        <Rectangle Fill="#6E000000"></Rectangle>
                    </Grid>
                </controlsPrimitives:PanningBackgroundLayer>

                <controlsPrimitives:PanningTitleLayer Tag="LayerIndex=100" x:Name="TitleLayer" Grid.Row="0" HorizontalAlignment="Left" Margin="10,-76,0,9"
                                                        Content="{TemplateBinding Title}" ContentTemplate="{TemplateBinding TitleTemplate}"
                                                        FontSize="187" FontFamily="{StaticResource PhoneFontFamilyLight}" CacheMode="BitmapCache"
                                                      >

                </controlsPrimitives:PanningTitleLayer>

                <controlsPrimitives:PanningLayer Tag="LayerIndex=20" x:Name="ItemsLayer" Grid.Row="1" HorizontalAlignment="Left" >

                    <ItemsPresenter x:Name="items"  >

                    </ItemsPresenter>
                </controlsPrimitives:PanningLayer>

            </Grid>
        </ControlTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Loaded="LayoutRoot_Loaded">

        <controls:Panorama x:Name="galleryPanorama" Template="{StaticResource panoramaTemplate}" Title="collection" SelectionChanged="Panorama_SelectionChanged">
            <!--<controls:Panorama.Background>
                <ImageBrush ImageSource="/images/transparent.png"/>
            </controls:Panorama.Background>-->
            <controls:PanoramaItem Header="albums" x:Name="panItemAlbums">
                <ScrollViewer      ScrollViewer.VerticalScrollBarVisibility="Visible" Grid.Row="1" Margin="0,0,0,10">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid  Margin="12,0,0,0" Grid.Row="0" x:Name="AlbumsLoadingBar" VerticalAlignment="Top">
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <TextBlock  FontSize="20" TextAlignment="Center" VerticalAlignment="Top">loading...</TextBlock>
                            <Rectangle Grid.Row="0" Grid.RowSpan="2" RenderTransformOrigin="0.5,0.5"  Opacity="0.7">
                                <Rectangle.Fill>
                                    <SolidColorBrush Color="{StaticResource PhoneAccentColor}"></SolidColorBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <!--<ProgressBar x:Name="_Timer" Height="28" VerticalAlignment="Center" Value="35" Foreground="{StaticResource PhoneForegroundBrush}" />-->
                            <Rectangle Grid.Row="1" Height="10" Margin="5"  Fill="{StaticResource PhoneForegroundBrush}" RenderTransformOrigin="0,0" >
                                <Rectangle.RenderTransform>
                                    <ScaleTransform x:Name="AlbumsProgressTransform"/>
                                </Rectangle.RenderTransform>
                            </Rectangle>

                        </Grid>
                        <ListBox Grid.Row="1"  Margin="0,12,0,0" d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"  ItemsSource="{Binding Items}" Name="lbAlbums" SelectionChanged="lbAlbums_SelectionChanged" HorizontalContentAlignment="Right" VerticalContentAlignment="Top">
                            <ListBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <toolkit:WrapPanel  ItemHeight="140" ItemWidth="140"/>
                                </ItemsPanelTemplate>
                            </ListBox.ItemsPanel>
                            <ListBox.ItemTemplate>
                                <DataTemplate>

                                    <Grid x:Name="LayoutRoot" Tap="PictureTile_Tap" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="12,0,0,12">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="7*"/>
                                            <ColumnDefinition Width="3*"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="3*"/>
                                            <RowDefinition Height="7*"/>
                                        </Grid.RowDefinitions>
                                        <Image x:Name="folderImage" Source="{Binding ImageSource}" Grid.RowSpan="2" Grid.ColumnSpan="2" x:FieldModifier="public" VerticalAlignment="Center" HorizontalAlignment="Center"  Stretch="UniformToFill" />
                                        <TextBlock x:Name="label" Text="{Binding AlbumName}" Grid.RowSpan="2" Grid.ColumnSpan="2" VerticalAlignment="Bottom" Margin="2"  x:FieldModifier="public" HorizontalAlignment="Left" FontSize="14"/>
                                        <Grid Grid.Column="1" Grid.Row="0" Visibility="{Binding Include}" x:Name="MarkAdded" x:FieldModifier="public" IsHitTestVisible="False" >
                                            <Ellipse x:Name="added" Fill="#FF90B447" Stretch="Uniform"/>
                                            <Image Source="../images/add.png" Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Right"/>
                                        </Grid>

                                    </Grid>
                                    <!--<Image  Height="120" Width="120" HorizontalAlignment="Center" VerticalAlignment="Center"/>-->


                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>


                        <!--<Grid   x:Name="TileGridPictures"   Margin="0,0,10,0">

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <my:PictureTile Grid.Row="0" Grid.Column="0" ></my:PictureTile>
                                <my:PictureTile  Grid.Row="0" Grid.Column="1" ></my:PictureTile>
                                <my:PictureTile Grid.Row="0" Grid.Column="2"  ></my:PictureTile>
                                <my:PictureTile Grid.Row="1" Grid.Column="0"  ></my:PictureTile>
                                <my:PictureTile  Grid.Row="1" Grid.Column="1" ></my:PictureTile>
                                <my:PictureTile Grid.Row="1" Grid.Column="2"  ></my:PictureTile>
                               

                            </Grid>-->
                        <!--<Border Name="overlayLoadingPictures"  Grid.ColumnSpan="2 " Grid.RowSpan="2" Background="#756F4060" Margin="12,12,10,0" Height="380">
                                <TextBlock Foreground="#FFFFDEF2" Text="Loading..."    FontSize="40" Margin="0" HorizontalAlignment="Center" Padding="0" TextAlignment="Center" VerticalAlignment="Center" />
                            </Border>-->
                    </Grid>
                </ScrollViewer>
            </controls:PanoramaItem>
            <controls:PanoramaItem Header="select pictures" x:Name="panItemPictures">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid  Margin="12,0,0,0" Grid.Row="0" x:Name="ImagesLoadingBar" VerticalAlignment="Top">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <TextBlock  FontSize="20" TextAlignment="Center" VerticalAlignment="Top">loading...</TextBlock>
                        <Rectangle Grid.Row="0" Grid.RowSpan="2" RenderTransformOrigin="0.5,0.5"  Opacity="0.7">
                            <Rectangle.Fill>
                                <SolidColorBrush Color="{StaticResource PhoneAccentColor}"></SolidColorBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <!--<ProgressBar x:Name="_Timer" Height="28" VerticalAlignment="Center" Value="35" Foreground="{StaticResource PhoneForegroundBrush}" />-->
                        <Rectangle Grid.Row="1" Height="10" Margin="5" Fill="{StaticResource PhoneForegroundBrush}" RenderTransformOrigin="0,0" >
                            <Rectangle.RenderTransform>
                                <ScaleTransform x:Name="ImagesProgressTransform"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>

                    </Grid>
                    <ListBox Margin="0,12,0,0" Grid.Row="1" Name="lbPictures" ItemsSource="{Binding Items}" SelectionChanged="lbPictures_SelectionChanged" VerticalContentAlignment="Top" HorizontalContentAlignment="Right">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel ItemHeight="140" ItemWidth="140" />
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ListBox.ItemTemplate>
                            <DataTemplate>

                                <Grid x:Name="LayoutRoot" Tap="PictureTile_Tap"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="12,0,0,12" >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="7*"/>
                                        <ColumnDefinition Width="3*"/>
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="3*"/>
                                        <RowDefinition Height="7*"/>
                                    </Grid.RowDefinitions>
                                    <Image x:Name="folderImage" Source="{Binding ImageSource}" Grid.RowSpan="2" Grid.ColumnSpan="2" x:FieldModifier="public" VerticalAlignment="Center" HorizontalAlignment="Center"  Stretch="UniformToFill"   />
                                    <Grid Grid.Column="1" Grid.Row="0" Visibility="{Binding Include}" x:Name="MarkAdded" x:FieldModifier="public" IsHitTestVisible="False" >
                                        <Ellipse x:Name="added" Fill="#FF90B447" Stretch="Uniform"/>
                                        <Image Source="../images/add.png" Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Right"/>
                                    </Grid>

                                </Grid>
                                <!--<Image  Height="120" Width="120" HorizontalAlignment="Center" VerticalAlignment="Center"/>-->


                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>


                    <!--<Grid   x:Name="TileGridPictures"   Margin="0,0,10,0">

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition />
                                    <RowDefinition />
                                </Grid.RowDefinitions>
                                <my:PictureTile Grid.Row="0" Grid.Column="0" ></my:PictureTile>
                                <my:PictureTile  Grid.Row="0" Grid.Column="1" ></my:PictureTile>
                                <my:PictureTile Grid.Row="0" Grid.Column="2"  ></my:PictureTile>
                                <my:PictureTile Grid.Row="1" Grid.Column="0"  ></my:PictureTile>
                                <my:PictureTile  Grid.Row="1" Grid.Column="1" ></my:PictureTile>
                                <my:PictureTile Grid.Row="1" Grid.Column="2"  ></my:PictureTile>
                               

                            </Grid>-->
                    <!--<Border Name="overlayLoadingPictures"  Grid.ColumnSpan="2 " Grid.RowSpan="2" Background="#756F4060" Margin="12,12,10,0" Height="380">
                                <TextBlock Foreground="#FFFFDEF2" Text="Loading..."    FontSize="40" Margin="0" HorizontalAlignment="Center" Padding="0" TextAlignment="Center" VerticalAlignment="Center" />
                            </Border>-->
                </Grid>
            </controls:PanoramaItem>


        </controls:Panorama>



    </Grid>

    <!--Panorama-based applications should not show an ApplicationBar-->

</UserControl >